<style>
.imgsign {
  cursor: pointer;
  width: 80%;
}
.imgborder {
  border: 1px dashed #dcdee2;
  border-radius: 4px;
  width: 58px;
  text-align: center;
  height: 58px;
  line-height: 58px;
  cursor: pointer;
}
.divimgchose { 
  width: 240px;
  border: 1px dashed #dcdee2;
  height: 110px; 
  position: relative; 
  text-align: center; 
}
.imgchose {
  height: 110px;
  width: auto;
  max-width: 100%;
  cursor: pointer;
}
</style>
<template>
  <div>
    <Card title="人员账号" ref="card">
      <a href="#" slot="extra" @click.prevent="SearchEmployee">刷新</a>
      <Button size="large" type="primary" icon="ios-add" v-on:click="AddEmployee">新增员工</Button>
    </Card>
    <Modal :mask-closable="false"  v-model="modal2" width="600">
      <p slot="header" class="color-primary text-align-center">
        <Icon type="ios-information-circle"></Icon>
        <span>{{typeName}}</span>
      </p>
      <Form :model="formItem" :label-width="80">
        <FormItem label="姓名">
          <Input v-model="employeeTemp.EmployeeName" size="large" placeholder="姓名" />
        </FormItem>
        <FormItem label="登录账号">
          <Input v-model="employeeTemp.Account" size="large" placeholder="登录账号" />
        </FormItem>
        <FormItem label="手机号">
          <Input v-model="employeeTemp.EmployeePhone" size="large" placeholder="手机号" />
        </FormItem>
        <FormItem label="职务">
          <RadioGroup v-model="employeeTemp.AuthName">
            <Radio label="评估员" class="margin-right-10"></Radio>
            <Radio label="管理员" class="margin-right-10"></Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="级别">
          <Select v-model="employeeTemp.EmployeeLevel">
            <Option :value="0">实习评估员</Option>
            <Option :value="1">助理评估员</Option>
            <Option :value="2">初级评估员</Option>
            <Option :value="3">中级评估员</Option>
            <Option :value="4">高级评估员</Option>
            <Option :value="5">评估师</Option>
          </Select>
        </FormItem>
        <FormItem label="签名图片">
          <Row type="flex" align="middle" class="code-row-bg">
           
            <Col span="8">
              <img
                v-if="employeeTemp.SignImg1"
                :src="employeeTemp.SignImg1"
                class="imgsign"
                @click="choseImg(1)"
              />
              <div v-else class="imgborder" @click="choseImg(1)">
                <Icon type="ios-camera" size="20"></Icon>
              </div>
            </Col>
            <Col span="8">
              <img
                v-if="employeeTemp.SignImg2"
                :src="employeeTemp.SignImg2"
                class="imgsign"
                @click="choseImg(2)"
              />
              <div v-else class="imgborder" @click="choseImg(2)">
                <Icon type="ios-camera" size="20"></Icon>
              </div>
            </Col>
            <Col span="4"></Col>
          </Row>
        </FormItem>
      </Form>

      <div slot="footer">
        <Button type="primary" size="large" @click="SaveEmployee">保存</Button>
      </div>
    </Modal>
    <Modal :mask-closable="false" title="签名图片" v-model="modelImg">
      <img :src="tmpImg" style="width: 100%" />
      <div slot="footer">
        <Button type="error" size="large" @click="delSignImg(tmpImg)">删除</Button>
      </div>
    </Modal>
    <Modal :mask-closable="false"
      :footer-hide="true"
      
      title="选择签名图片"
      width="800"
      v-model="modelchoseImg"
    >
      <Row :gutter="16">
        <Col span="8" :key="item.Gid" v-for="item in signImgs">
          <div class="divimgchose">
            <img @click="choseImgFinish(item)" class="imgchose" :src="item.ImgUrl" />
          </div>
        </Col>
      </Row>
    </Modal>
    <Table
      class="margin-top-10"
      border
      :columns="tableTitle"
      :data="tableData"
      ref="table"
      :height="tableHeight"
    ></Table>
  </div>
</template>
<script>
import { Message, Modal } from "view-design";
import { getToken, baseUrl } from "@/libs/util";
import {
  SearchEmployee,
  SaveEmployee,
  ResetEmployeePwd,
  DeleteEmployee,
  SearchSignImg
} from "@/api/data";
export default {
  name: "employee_manager",
  data() {
    return {
      tableHeight: 450,
      modelchoseImg: false,
      modal2: false,
      tableTitle: [
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.typeName = "修改员工";
                      this.employeeTemp = params.row;

                      this.modal2 = true;
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "success",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.ResetEmployeePwd(params.row.Gid);
                    }
                  }
                },
                "重置密码"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.DeleteEmployee(params.row.Gid);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        },
        {
          title: "姓名",
          key: "EmployeeName"
        },
        {
          title: "手机号",
          key: "EmployeePhone"
        },
        {
          title: "登录账号",
          key: "Account"
        },
        {
          title: "角色",
          key: "AuthName"
        },
        {
          title: "签名图片",
          render: (h, params) => {
            return h(
              "div",

              [
                h("img", {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  attrs: {
                    src: params.row.SignImg1
                  },
                  style:
                    "width: 40px;height: 40px; margin:5px 5px 0 0; border-radius: 2px;"
                }),
                h("img", {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  attrs: {
                    src: params.row.SignImg2
                  },
                  style:
                    "width: 40px;height: 40px;margin:5px 5px 0 0; border-radius: 2px;"
                })
              ]
            );
          }
        }
      ],
      currentImg: 1,
      tableData: [],
      typeName: "新增员工",
      employeeTemp: {
        Gid: "",
        Account: "",
        Auth: 1,
        AuthName: "评估员",
        EmployeeName: "",
        EmployeePhone: "",
        EmployeeAvator: "",
        EmployeeLevel:0,
        SignImg1: "",
        SignImg2: "",
        IsDelete: 0
      },
      tmpImg: "",
      modelImg: false,
      signImgs: [],
      uploadheader: {
        Authorization: "Bearer " + getToken()
      },
      uploadname: {
        name: "signImgs"
      },
      uploadurl:  + "api/Data/UploadImg"
    };
  },
  methods: {
    clearEmployee() {
      this.typeName = "新增员工";
      this.employeeTemp = {
        Gid: "",
        Account: "",
        Auth: 1,
        AuthName: "评估员",
        EmployeeName: "",
        EmployeePhone: "",
        EmployeeAvator: "",
        SignImg1: "",
        SignImg2: "",
        IsDelete: 0
      };
    },
    AddEmployee() {
      this.clearEmployee();
      this.modal2 = true;
    },
    ResetEmployeePwd(id) {
      ResetEmployeePwd(id).then(res => {
        const data = res.data;
        if (data.Type == 1) {
          this.$Modal.success({ title: "提示", content: "密码重置为'654321" });
        } else {
          this.$Modal.error({ title: "提示", content: data.Message });
        }
      });
    },
    DeleteEmployee(id) {
      Modal.confirm({
        title: "提示",
        content: "确定要删除此员工吗？",
        onOk: () => {
          DeleteEmployee(id).then(res => {
            const data = res.data;
            if (data.Type == 1) {
              this.SearchEmployee();
              this.$Modal.success({ title: "提示", content: "删除成功" });
            } else {
              this.$Modal.error({ title: "提示", content: data.Message });
            }
          });
        },
        onCancel: () => {}
      });
    },
    SearchEmployee() {
      let vm = this;
      SearchEmployee().then(res => {
        const data = res.data;
        if (data.Type == 1) {
          vm.tableData = data.Data;
        } else {
          Message.error(data.Message);
        }
      });
    },
    SearchSignImg() {
      let vm = this;
      SearchSignImg().then(res => {
        const data = res.data;
        if (data.Type == 1) {
          vm.signImgs = data.Data;
        } else {
          Message.error(data.Message);
        }
      });
    },
    SaveEmployee() {
      let vm = this;
      if (!this.employeeTemp.EmployeeName) {
        Message.error("姓名不能为空");
        return;
      }
      if (!this.employeeTemp.EmployeePhone) {
        Message.error("手机号不能为空");
        return;
      }
      if (!this.employeeTemp.Account) {
        Message.error("登录账号不能为空");
        return;
      }

      if (this.employeeTemp.AuthName == "管理员") {
        this.employeeTemp.Auth = 15;
      } else {
        this.employeeTemp.Auth = 1;
      }

      SaveEmployee(this.employeeTemp).then(res => {
        const data = res.data;
        if (data.Type == 1) {
          vm.modal2 = false;
          vm.clearEmployee();
          vm.SearchEmployee();
          // Message.success('操作成功');
        } else {
          this.$Modal.error({ title: "提示", content: data.Message });
        }
      });
    },
    priviewImg(name) {
      this.tmpImg = name;
      this.modelImg = true;
    },
    choseImg(type) {
      this.currentImg = type;
      this.modelchoseImg = true;
    },
    choseImgFinish(item) {
      this.modelchoseImg = false;
      if (this.currentImg == 1) {
        this.employeeTemp.SignImg1 = item.ImgUrl;
      } else {
        this.employeeTemp.SignImg2 = item.ImgUrl;
      }
    },
    delSignImg(tmpImg) {
      this.removeByValue(this.signImgs, tmpImg);
      this.modelImg = false;
    }
  },
  created() {},
  mounted() {
    var cardHeight = this.$refs.card.$el.offsetHeight;
    this.tableHeight = window.innerHeight - cardHeight - 160;
    this.SearchEmployee();
    this.SearchSignImg();
  }
};
</script>
